<template>
  <view class="invite">
    <view class="tab">
      <text class="title">
        邀请-
        <text class="tip">点击图片生成专属二维码</text>
      </text>
      <view class="line"></view>
    </view>
    <!-- 邀请广告图 -->
    <view class="img" @tap="getImg"></view>
    <!-- 图片显示邀请码 -->
    <view class="mask" v-show="imageVis">
      <view class="image">
        <uni-icons @tap="closeimg" type="close" size="40"></uni-icons>
        <view class="wrapper">
          <canvas style="height: 100%;width: 100%;backgroundColor: #ffffff" canvas-id="firstCanvas"></canvas>
        </view>
        <view class="btn-group">
          <button
            type="primary"
            size="mini"
            open-type="openSetting"
            @opensetting="open"
            v-if="show1"
          >保存相册</button>
          <button type="primary" size="mini" @tap="save" v-else>保存相册</button>
          <button type="primary" size="mini" open-type="share">分享</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import uniIcons from "./uni-icons/uni-icons";
import uniSection from "../withdraw/uni-section/uni-section";
export default {
  components: { uniIcons, uniSection },
  data() {
    return {
      // 图片显示隐藏
      imageVis: false,
      // 邀请二维码的地址
      providerList: [],
      show1: false,
      isDom: true,
      canvasUrl: "",
      // 海报背景图片地址
      cover: "https://www.jianbingkonggu.com/uploads/share.png",
      hascanvas: false
    };
  },
  onShareAppMessage(res) {
    let pid = JSON.parse(uni.getStorageSync("login")).user_id;
    if (res.from === "button") {
	  title: "天天来提现";
	  console.log(123)
    }
    return {
      title: "天天来提现",
      path: `/pages/anchor/anchor?pid=${pid}`,
      imgUrl: "https://ww1.yunjiexi.club/2020/03/18/GwFBk.png"
    };
  },
  methods: {
    open(e) {
      if (e.detail.authSetting["scope.writePhotosAlbum"]) {
        this.show1 = false;
      }
    },
    closeimg() {
      this.imageVis = false;
    },
    getImg() {
      const that = this;
      const imgUrl = uni.getStorageSync("login").spread_code;
      this.imageVis = true;
      if (!that.hascanvas) {
        uni.showToast({
          icon: "loading",
          title: "正在生成海报中",
          duration: 1000
        });
      }
      // 绘制canvas
      let ctx = uni.createCanvasContext("firstCanvas");
      uni.getImageInfo({
        src: that.cover,
        success(res) {
          const path = res.path;
          ctx.drawImage(path, 0, 0, uni.upx2px(500), uni.upx2px(878));
          // ctx.fillRect(uni.upx2px(165), uni.upx2px(650), uni.upx2px(200), uni.upx2px(200));
          uni.getImageInfo({
            src: imgUrl,
            success(res) {
              const path1 = res.path;
              ctx.drawImage(
                path1,
                uni.upx2px(165),
                uni.upx2px(650),
                uni.upx2px(200),
                uni.upx2px(200)
              );
              ctx.draw(false, () => {
                uni.canvasToTempFilePath({
                  x: 0,
                  y: 0,
                  canvasId: "firstCanvas",
                  success: function(res) {
                    that.canvasUrl = res.tempFilePath;
                    that.hascanvas = true;
                  },
                  fail(e) {
                    uni.showToast({
                      title: "生成海报失败",
                      icon: "none"
                    });
                  }
                });
              });
            }
          });
        },
        fail(error) {}
      });
    },
    //点击保存图片
    save() {
      let that = this;
      //若二维码未加载完毕，加个动画提高用户体验
      uni.showToast({
        icon: "loading",
        title: "正在保存图片",
        duration: 1000
      });
      //判断用户是否授权"保存到相册"
      wx.getSetting({
        success(res) {
          //没有权限，发起授权
          if (!res.authSetting["scope.writePhotosAlbum"]) {
            wx.authorize({
              scope: "scope.writePhotosAlbum",
              success() {
                //用户允许授权，保存图片到相册
                // 生成动态图片保存到相册
                that.savePhoto();
              },
              fail() {
                //用户点击拒绝授权，跳转到设置页，引导用户授权
                that.show1 = true;
              }
            });
          } else {
            //用户已授权，保存到相册
            that.savePhoto();
          }
        }
      });
    },
    //保存图片到相册，提示保存成功
    savePhoto() {
      wx.saveImageToPhotosAlbum({
        filePath: this.canvasUrl,
        success(res) {
          uni.showToast({
            title: "保存成功",
            icon: "success",
            duration: 1000
          });
          that.imageVis = false;
        }
      });
    }
  }
};
</script>

<style lang="scss">
.invite {
  height: 100%;
  .tab {
    // width: 100rpx;
    height: 100rpx;
    text-indent: 20rpx;
    .title {
      font-weight: bold;
      line-height: 100rpx;
      font-size: 40rpx;
      .tip {
        font-size: 16px;
      }
    }
    .line {
      width: 20%;
      height: 5rpx;
      background-color: red;
      margin-left: 140rpx;
    }
  }
  .img {
    width: 90%;
    height: 370rpx;
    margin: 30rpx auto;
    border-radius: 40rpx;
    background: url(https://ww1.yunjiexi.club/2020/04/14/8QSJE.png) no-repeat;
    background-size: cover;
  }
  .mask {
    width: 100%;
    height: 100%;
    position: absolute;
    text-align: center;
    top: 0;
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.5);
    .image {
      width: 100%;
      height: 100%;
      position: relative;
      top: 10%;
      image {
        width: 496rpx;
        height: 878rpx;
      }
      .wrapper {
        width: 496rpx;
        height: 878rpx;
        display: block;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 0;
      }
      .qrcode {
        width: 200rpx;
        height: 200rpx;
        position: absolute;
        bottom: 22%;
        left: 50%;
        transform: translateX(-50%);
      }
      uni-icons {
        position: absolute;
        top: -6%;
        right: 6%;
      }
    }
    .btn-group {
      display: flex;
      margin-top: 20rpx;
      // justify-content: space-around;
      button {
        width: 30%;
      }
      position: absolute;
      width: 100%;
      bottom: 120px;
    }
  }
}
</style>
